<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div :style="{ padding: '24px', background: '#fff' }">
            <a-row type="flex" align="middle">
              <a-col :span="4">标题：</a-col>
              <a-col :span="12">
                <a-input v-model="ads_title" placeholder="请输入标题" />
              </a-col>
            </a-row>
            <a-row class="mt1rem" type="flex" align="middle">
              <a-col :span="4">上传图片：</a-col>
              <a-col :span="12">
                <div class="clearfix">
                  <div class="image" v-if="file_name">
                    <div class="del_icon" @click="del_file">
                      <icon-park type="delete-one" theme="filled" />
                    </div>
                    <img v-if="file_name" class="img" :src="file_name" />
                  </div>
                  <a-upload
                    listType="picture-card"
                    :remove="handleRemove"
                    :beforeUpload="beforeUpload"
                  >
                    <div v-if="!fileList">
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">上传图片</div>
                    </div>
                  </a-upload>
                </div>
              </a-col>
            </a-row>
            <a-row class="mt1rem" type="flex">
              <a-col :span="4">跳转地址：</a-col>
              <a-col>
                <a-textarea
                  style="width: 200px"
                  v-model="ads_link"
                  placeholder="请填写跳转地址"
                  :autoSize="true"
                />
              </a-col>
            </a-row>
            <div class="btn">
              <a-button type="primary" :loading="iconLoading" @click="save"
                >修改</a-button
              >
              <a-button class="ml1rem" type="primary" @click="back"
                >返回</a-button
              >
            </div>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import axios from "axios";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
import { baseURL } from "../../api/config.js";
import "@icon-park/vue/styles/index.css";
import { IconPark } from "@icon-park/vue/es/all";
export default {
  data() {
    return {
      // catid: "",
      iconLoading: false,
      loading: false,
      fileList: "",
      ads_title: "",
      ads_link: "",
      file_name: "",
      fileid: 0,
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
    IconPark,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getdata();
  },
  methods: {
    getdata() {
      this.ads_id = this.$route.query.ads_id;
      this.setsiders();
      this.getadsdetail();
    },
    //选择图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = file;
      return false;
    },
    upimg() {
      var token = localStorage.getItem("token");
      // const formData = new FormData();
      const formData = new FormData();
      formData.append("files[]", this.fileList);
      formData.append("token", token);
      this.saveFile(formData);
    },
    saveFile(formData) {
      axios({
        method: "post",
        url: baseURL + "Admin/file/uploadfile",
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          if (res.data.code == 1) {
            this.imageUrl = res.data;
            this.fileid = res.data.fileid;
            // setTimeout(this.upimages, 1);
            this.$message.success("图片上传成功");
            this.savecontent();
          } else if (res.code == 4001) {
            this.$router.push("/Auth/login");
            this.$message.warning("凭证失效，请重新登陆");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //上传图片
    save() {
      if (this.fileList) {
        this.upimg();
      } else {
        this.savecontent();
      }
    },
    //提交内容
    savecontent() {
      const url = "/Admin/Ads/editads";
      const paramObj = {
        ads_id: this.ads_id,
        ads_title: this.ads_title,
        ads_link: this.ads_link,
        fileid: this.fileid,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.$router.go(-1);
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("修改失败，请刷新重试");
        }
      });
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
    //获取广告详情
    getadsdetail: function () {
      const url = "/Admin/Ads/getadsdetail";
      const paramObj = {
        ads_id: this.ads_id,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.ads_title = res.data.ads_title;
          this.ads_link = res.data.ads_link;
          this.file_name = res.data.file_name;
          this.fileid = res.data.fileid;

        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("添加失败，请刷新重试");
        }
      });
    },
    del_file() {
      this.file_name = "";
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "8");
    },
  },
};
</script>
<style scoped>
.mt1rem {
  margin-top: 1rem;
}
.ml1rem {
  margin-left: 1rem;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.btn {
  margin-top: 10px;
}
.clearfix {
  display: flex;
}
.image {
  position: relative;
  margin-right: 10px;
}
.del_icon {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 16px;
  color: rgb(255, 87, 87);
}
.img {
  height: 102px;
  width: 102px;
}
</style>
